<script lang="jsx" setup>
import dayjs from 'dayjs';
import { computed, nextTick, ref } from 'vue';
import { Button } from 'ant-design-vue';
import Table from '@/components/common/table.vue';
import CommonSearch from '@/components/common/common-search.vue';
import { deleteItem, getStateList } from '@/service/api/modules/manage/message-list';
import Modal from '@/components/common/modal.vue';
import Recover from './modules/recover.vue';

const commonSearchRef = ref(null);
const tableRef = ref(null);
const searchParams = ref({
  keywords: null,
  noticeState: null,
  time: null
});

const noticeStateList = ref([]);

const searchFormList = [
  {
    type: 'input',
    key: 'keywords',
    label: '消息标题',
    placeholder: '请输入消息标题',
    span: 24,
    md: 12,
    lg: 8,
    xl: 8,
    xxl: 6
  },
  {
    type: 'select',
    key: 'noticeState',
    label: '消息状态',
    placeholder: '请输入消息状态',
    span: 24,
    md: 12,
    lg: 8,
    xl: 8,
    xxl: 6,
    selectOptions: noticeStateList
  },
  {
    type: 'dateRangePicker',
    key: 'time',
    label: '日期',
    span: 24,
    md: 12,
    lg: 10,
    xl: 8,
    xxl: 6
  }
];

const column = [
  {
    key: 'dataIndex',
    dataIndex: 'dataIndex',
    title: '序号',
    width: 70,
    fixed: 'left',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'noticeTitle',
    dataIndex: 'noticeTitle',
    title: '消息标题',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'noticeDescription',
    dataIndex: 'noticeDescription',
    title: '消息内容',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'noticeUrl',
    dataIndex: 'noticeUrl',
    title: '消息链接',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'noticeTypeName',
    dataIndex: 'noticeTypeName',
    title: '消息类型',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'noticeStateName',
    dataIndex: 'noticeStateName',
    title: '消息状态',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'sender',
    dataIndex: 'sender',
    title: '发件人',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'recipientName',
    dataIndex: 'recipientName',
    title: '收件人',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'createTime',
    dataIndex: 'createTime',
    title: '创建时间',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 180,
    customRender: ({ record }) => {
      return dayjs(record.createTime).format('YYYY-MM-DD HH:mm:ss');
    }
  },
  {
    key: 'czRow',
    dataIndex: 'czRow',
    title: '操作',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 180,
    customRender: ({ record }) => {
      return (
        <div>
          <Button
            type="link"
            danger
            class="pl-3px pr-3px"
            onClick={() => {
              delRow(record);
            }}
          >
            删除
          </Button>
          {Number(record.noticeType) !== 1 ? (
            <Button
              type="link"
              class="pl-3px pr-3px"
              onClick={() => {
                handleOpen(record);
              }}
            >
              回复
            </Button>
          ) : (
            ''
          )}
        </div>
      );
    }
  }
];

const searchData = computed(() => {
  const params = {
    ...searchParams.value
  };
  if (searchParams.value?.time?.[0]) {
    params.startTime = dayjs(searchParams.value.time[0]).format('YYYY-MM-DD');
    params.endTime = dayjs(searchParams.value.time[1]).format('YYYY-MM-DD');
  }
  delete params.time;
  return params;
});

function search() {
  tableRef.value.getData(1);
}

function reset() {
  nextTick(() => {
    searchParams.value = {
      keywords: null,
      noticeState: null,
      time: null
    };
    search();
  });
}

function getNoticeStateList() {
  getStateList().then(({ data, error }) => {
    if (!error) {
      noticeStateList.value = data.map(item => {
        return {
          label: item.noticeStateName,
          value: item.noticeState
        };
      });
    }
  });
}

getNoticeStateList();

function delRow(row) {
  window.$modal.confirm({
    title: `确定删除?`,
    onOk: () => {
      deleteItem(row.noticeUuid).then(({ error }) => {
        if (!error) {
          window.$message.success('删除成功');
          search();
        }
      });
    },
    onCancel: () => {}
  });
}

const modalVisible = ref(false);
const modleAddLoading = ref(false);
const currentRow = ref(null);
function handleOpen(row) {
  currentRow.value = row;
  modalVisible.value = true;
}

function handleClose() {
  modalVisible.value = false;
}
const recoverRef = ref(null);
async function handleOk() {
  const flag = recoverRef.value.submitForm();
  if (flag) {
    handleClose();
  }
}
</script>

<template>
  <div class="message jl-main-page min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <CommonSearch
      ref="commonSearchRef"
      v-model:searchParams="searchParams"
      :form-list="searchFormList"
      :is-search="true"
      @search="search"
      @reset="reset"
    ></CommonSearch>

    <Table
      ref="tableRef"
      v-model:searchParams="searchData"
      :column="column"
      :show-row-selection="false"
      row-key="noticeUuid"
      :scroll="{ y: 'auto' }"
      is-init-get-data
      url="/qms/agv/notice/list"
    ></Table>

    <Modal
      v-model:visible="modalVisible"
      title="回复"
      width="70vw"
      height="80vh"
      :centered="true"
      :destroy-on-close="true"
      @close="handleClose"
    >
      <Recover ref="recoverRef" :row="currentRow"></Recover>
      <template #footer>
        <div class="modal-footer">
          <AButton :loading="modleAddLoading" type="primary" @click="handleOk">回 复</AButton>
          <AButton @click="handleClose">关 闭</AButton>
        </div>
      </template>
    </Modal>
  </div>
</template>
